लेज़ी लोडिंग: छवियों और घटकों के साथ वेब प्रदर्शन को अनुकूलित करना

आज के डिजिटल परिदृश्य में, वेबसाइट का प्रदर्शन सर्वोपरि है। उपयोगकर्ता तेज़, प्रतिक्रियाशील अनुभवों की अपेक्षा करते हैं, और खोज इंजन उन वेबसाइटों को प्राथमिकता देते हैं जो इसे प्रदान करती हैं। प्रदर्शन को बढ़ावा देने के लिए एक महत्वपूर्ण तकनीक लेज़ी लोडिंग है। यह लेख छवियों और घटकों की लेज़ी लोडिंग के लिए एक व्यापक गाइड प्रदान करता है, जिससे आपको वैश्विक दर्शकों के लिए अपनी वेबसाइट को अनुकूलित करने में मदद मिलती है।

लेज़ी लोडिंग क्या है?

लेज़ी लोडिंग एक ऐसी तकनीक है जो संसाधनों (छवियों, iframe, घटकों, आदि) की लोडिंग को तब तक के लिए टाल देती है जब तक कि उनकी वास्तव में आवश्यकता न हो - आम तौर पर, जब वे व्यूपोर्ट में प्रवेश करने वाले होते हैं। इसका मतलब है कि सभी संपत्तियों को अग्रिम रूप से लोड करने के बजाय, ब्राउज़र केवल उन संसाधनों को लोड करता है जो प्रारंभिक पृष्ठ लोड पर उपयोगकर्ता को दिखाई देते हैं। जैसे-जैसे उपयोगकर्ता पृष्ठ को नीचे स्क्रॉल करता है, और अधिक संसाधन दिखाई देने पर लोड हो जाते हैं।

इसे इस तरह से सोचें: एक यात्रा के लिए पैकिंग की कल्पना करें। शुरू से ही अपनी पूरी अलमारी को साथ खींचने के बजाय, आप केवल वही कपड़े पैक करते हैं जिनकी आपको तुरंत आवश्यकता होगी। जैसे-जैसे आप अपनी यात्रा पर आगे बढ़ते हैं, आप आवश्यकतानुसार अतिरिक्त वस्तुओं को अनपैक करते हैं। वेबसाइटों के लिए लेज़ी लोडिंग अनिवार्य रूप से इसी तरह काम करती है।

लेज़ी लोडिंग का उपयोग क्यों करें?

लेज़ी लोडिंग कई महत्वपूर्ण लाभ प्रदान करती है:

• बेहतर प्रारंभिक पेज लोड समय: ऑफ-स्क्रीन संसाधनों की लोडिंग को स्थगित करके, ब्राउज़र उस सामग्री को लोड करने पर ध्यान केंद्रित कर सकता है जो उपयोगकर्ता को तुरंत दिखाई देती है। इससे प्रारंभिक पेज लोड समय तेज़ होता है, उपयोगकर्ता की पहली धारणा में सुधार होता है और बाउंस दर कम होती है।
• बैंडविड्थ की खपत में कमी: उपयोगकर्ता केवल उन संसाधनों को डाउनलोड करते हैं जिन्हें वे वास्तव में देखते हैं, जिससे बैंडविड्थ की खपत कम हो जाती है, खासकर मोबाइल उपकरणों पर या सीमित डेटा योजनाओं वाले उपयोगकर्ताओं के लिए। यह उन क्षेत्रों के उपयोगकर्ताओं के लिए विशेष रूप से महत्वपूर्ण है जहाँ इंटरनेट की गति धीमी है या डेटा महंगा है।
• कम सर्वर लोड: कम प्रारंभिक अनुरोधों को पूरा करके, सर्वर पर कम लोड पड़ता है, जिससे समग्र वेबसाइट प्रदर्शन और स्केलेबिलिटी में सुधार हो सकता है।
• बेहतर उपयोगकर्ता अनुभव: एक तेज़ वेबसाइट एक बेहतर उपयोगकर्ता अनुभव प्रदान करती है, जिससे जुड़ाव, रूपांतरण और ग्राहकों की संतुष्टि में वृद्धि होती है।
• बेहतर SEO: Google जैसे खोज इंजन पेज लोड गति को एक रैंकिंग कारक मानते हैं। लेज़ी लोडिंग आपकी वेबसाइट के SEO प्रदर्शन को बेहतर बनाने में मदद कर सकती है।

लेज़ी लोडिंग छवियाँ

छवियाँ अक्सर एक वेबसाइट पर सबसे बड़ी संपत्ति होती हैं, जो उन्हें लेज़ी लोडिंग के लिए प्रमुख उम्मीदवार बनाती हैं। यहाँ छवियों के लिए लेज़ी लोडिंग को लागू करने का तरीका बताया गया है:

नेटिव लेज़ी लोडिंग

आधुनिक ब्राउज़र (क्रोम, फ़ायरफ़ॉक्स, सफारी और एज) अब loading विशेषता का उपयोग करके नेटिव लेज़ी लोडिंग का समर्थन करते हैं। यह छवियों को लेज़ी लोड करने का सबसे सरल और सबसे कुशल तरीका है।

नेटिव लेज़ी लोडिंग को सक्षम करने के लिए, बस अपने <img> टैग में loading="lazy" विशेषता जोड़ें:

            <img src="image.jpg" alt="My Image" loading="lazy">
            

              
                Copy
              
            
          

loading विशेषता के तीन मान हो सकते हैं:

• lazy: छवि को तब तक लोड करना स्थगित करें जब तक कि वह व्यूपोर्ट में प्रवेश न करने वाली हो।
• eager: छवि को तुरंत लोड करें, चाहे पृष्ठ पर उसकी स्थिति कुछ भी हो। (यदि विशेषता मौजूद नहीं है तो यह डिफ़ॉल्ट व्यवहार है।)
• auto: ब्राउज़र को यह तय करने दें कि छवि को लेज़ी लोड करना है या नहीं।

उदाहरण:

            <img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">
            

              
                Copy
              
            
          

इस उदाहरण में, लंदन ब्रिज, टोक्यो स्काईलाइन और रियो डी जेनेरियो की छवियाँ तभी लोड होंगी जब उपयोगकर्ता उन तक स्क्रॉल करेगा। यह बहुत मददगार है, खासकर यदि कोई उपयोगकर्ता पृष्ठ के बिल्कुल नीचे तक स्क्रॉल नहीं करता है।

जावास्क्रिप्ट के साथ लेज़ी लोडिंग

पुराने ब्राउज़रों के लिए जो नेटिव लेज़ी लोडिंग का समर्थन नहीं करते हैं, आप जावास्क्रिप्ट लाइब्रेरी का उपयोग कर सकते हैं या अपना स्वयं का कस्टम स्क्रिप्ट लिख सकते हैं। यहाँ इंटरसेक्शन ऑब्जर्वर एपीआई का उपयोग करके एक मूल उदाहरण दिया गया है:

            const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});
            

              
                Copy
              
            
          

स्पष्टीकरण:

1. हम उन सभी <img> तत्वों का चयन करते हैं जिनमें data-src विशेषता है।
2. हम एक नया IntersectionObserver इंस्टेंस बनाते हैं। कॉलबैक फ़ंक्शन तब निष्पादित होता है जब एक प्रेक्षित तत्व व्यूपोर्ट में प्रवेश करता है या बाहर निकलता है।
3. कॉलबैक फ़ंक्शन के अंदर, हम entries (वे तत्व जो व्यूपोर्ट को काट चुके हैं) पर पुनरावृति करते हैं।
4. यदि कोई तत्व प्रतिच्छेद कर रहा है (entry.isIntersecting सत्य है), तो हम छवि की src विशेषता को data-src विशेषता के मान पर सेट करते हैं।
5. फिर हम data-src विशेषता को हटा देते हैं और छवि का निरीक्षण करना बंद कर देते हैं, क्योंकि अब इसकी आवश्यकता नहीं है।
6. अंत में, हम observer.observe(img) का उपयोग करके प्रत्येक छवि का निरीक्षण करते हैं।

HTML संरचना:

            <img data-src="image.jpg" alt="My Image">
            

              
                Copy
              
            
          

ध्यान दें कि वास्तविक छवि URL को src विशेषता के बजाय data-src विशेषता में रखा गया है। यह ब्राउज़र को तुरंत छवि लोड करने से रोकता है।

लेज़ी लोडिंग लाइब्रेरी का उपयोग करना

कई जावास्क्रिप्ट लाइब्रेरी छवियों की लेज़ी लोडिंग की प्रक्रिया को सरल बना सकती हैं। कुछ लोकप्रिय विकल्पों में शामिल हैं:

• Lozad.js: एक हल्की और निर्भरता-मुक्त लेज़ी लोडिंग लाइब्रेरी।
• yall.js: येट अनदर लेज़ी लोडर। इंटरसेक्शन ऑब्जर्वर का उपयोग करने वाली एक आधुनिक लेज़ी लोडिंग लाइब्रेरी।
• React Lazy Load: छवियों और अन्य घटकों को लेज़ी लोड करने के लिए एक रिएक्ट घटक।

ये लाइब्रेरी आमतौर पर लेज़ी लोडिंग को शुरू करने के लिए एक सरल एपीआई प्रदान करती हैं और प्लेसहोल्डर छवियों और संक्रमण प्रभावों जैसी अतिरिक्त सुविधाएँ प्रदान करती हैं।

लेज़ी लोडिंग घटक

लेज़ी लोडिंग केवल छवियों के लिए नहीं है; इसे घटकों पर भी लागू किया जा सकता है, विशेष रूप से रिएक्ट, एंगुलर और व्यू जैसे आधुनिक जावास्क्रिप्ट फ्रेमवर्क में। यह विशेष रूप से कई घटकों वाले बड़े एकल-पृष्ठ अनुप्रयोगों (SPAs) के लिए उपयोगी है।

रिएक्ट में लेज़ी लोडिंग

रिएक्ट घटकों को लेज़ी लोड करने के लिए एक अंतर्निहित React.lazy() फ़ंक्शन प्रदान करता है। यह फ़ंक्शन आपको घटकों को गतिशील रूप से आयात करने की अनुमति देता है, जो तब केवल तभी लोड होते हैं जब उन्हें प्रस्तुत किया जाता है।

            import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;
            

              
                Copy
              
            
          

स्पष्टीकरण:

1. हम MyComponent को गतिशील रूप से आयात करने के लिए React.lazy() का उपयोग करते हैं। import() फ़ंक्शन एक वादा लौटाता है जो घटक मॉड्यूल में हल हो जाता है।
2. हम MyComponent को एक <Suspense> घटक में लपेटते हैं। Suspense घटक आपको एक फॉलबैक यूआई (इस मामले में, "Loading...") प्रदर्शित करने की अनुमति देता है, जबकि घटक लोड हो रहा है।

एंगुलर में लेज़ी लोडिंग

एंगुलर रूटिंग कॉन्फ़िगरेशन में loadChildren गुण का उपयोग करके मॉड्यूल की लेज़ी लोडिंग का समर्थन करता है।

            const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];
            

              
                Copy
              
            
          

स्पष्टीकरण:

1. हम my-module पथ के लिए एक रूट परिभाषित करते हैं।
2. हम यह निर्दिष्ट करने के लिए loadChildren गुण का उपयोग करते हैं कि MyModuleModule को लेज़ी लोड किया जाना चाहिए। import() फ़ंक्शन गतिशील रूप से मॉड्यूल आयात करता है।
3. then() विधि का उपयोग मॉड्यूल तक पहुंचने और MyModuleModule वर्ग को वापस करने के लिए किया जाता है।

Vue.js में लेज़ी लोडिंग

Vue.js गतिशील आयात और component टैग का उपयोग करके घटकों की लेज़ी लोडिंग का समर्थन करता है।

            <template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>
            

              
                Copy
              
            
          

स्पष्टीकरण:

1. हम एक घटक को गतिशील रूप से प्रस्तुत करने के लिए :is विशेषता के साथ <component> टैग का उपयोग करते हैं।
2. mounted जीवनचक्र हुक में, हम MyComponent.vue को गतिशील रूप से आयात करने के लिए import() फ़ंक्शन का उपयोग करते हैं।
3. फिर हम dynamicComponent डेटा प्रॉपर्टी को मॉड्यूल के डिफ़ॉल्ट निर्यात पर सेट करते हैं।

लेज़ी लोडिंग के लिए सर्वोत्तम अभ्यास

यह सुनिश्चित करने के लिए कि लेज़ी लोडिंग प्रभावी ढंग से लागू हो, इन सर्वोत्तम प्रथाओं पर विचार करें:

• जब संभव हो नेटिव लेज़ी लोडिंग का उपयोग करें: यदि आप आधुनिक ब्राउज़रों को लक्षित कर रहे हैं, तो छवियों और iframe के लिए नेटिव loading विशेषता का उपयोग करें।
• सही लाइब्रेरी चुनें: यदि आपको पुराने ब्राउज़रों का समर्थन करने या अतिरिक्त सुविधाओं की आवश्यकता है, तो एक अच्छी तरह से बनाए रखी गई और हल्की लेज़ी लोडिंग लाइब्रेरी चुनें।
• प्लेसहोल्डर्स का उपयोग करें: संसाधनों के लोड होने पर सामग्री को स्थानांतरित होने से रोकने के लिए प्लेसहोल्डर चित्र या यूआई तत्व प्रदान करें। यह उपयोगकर्ता अनुभव में सुधार करता है और लेआउट अस्थिरता को कम करता है। बहुत छोटे (कम केबी आकार) प्लेसहोल्डर छवियों का उपयोग करें, या सिर्फ ठोस रंग के ब्लॉक जो अंततः लोड होने वाली छवि के औसत रंग से मेल खाते हैं।
• छवियों को अनुकूलित करें: लेज़ी लोडिंग लागू करने से पहले, अपनी छवियों को संपीड़ित करके और उपयुक्त फ़ाइल स्वरूपों (जैसे, WebP, JPEG, PNG) का उपयोग करके अनुकूलित करें।
• पूरी तरह से परीक्षण करें: यह सुनिश्चित करने के लिए कि यह सही ढंग से काम कर रहा है, अपने लेज़ी लोडिंग कार्यान्वयन का विभिन्न ब्राउज़रों, उपकरणों और नेटवर्क स्थितियों में परीक्षण करें। यह सुनिश्चित करने के लिए कि छवियाँ लोड होने में बहुत अधिक समय नहीं ले रही हैं, निचले-स्तर के उपकरणों (अक्सर पुराने फ़ोन) पर उपयोगकर्ताओं पर ध्यान दें।
• फोल्ड पर विचार करें: फोल्ड के ऊपर के तत्वों (प्रारंभिक पृष्ठ लोड पर दिखाई देने वाले) के लिए, उन्हें लेज़ी लोड करने से बचें। तेज़ प्रारंभिक प्रतिपादन सुनिश्चित करने के लिए इन तत्वों को उत्सुकता से लोड किया जाना चाहिए।
• महत्वपूर्ण संसाधनों को प्राथमिकता दें: उन महत्वपूर्ण संसाधनों की पहचान करें जो प्रारंभिक उपयोगकर्ता अनुभव के लिए आवश्यक हैं और उन्हें उत्सुकता से लोड करें। इसमें वेबसाइट का लोगो, नेविगेशन तत्व और पृष्ठ की मुख्य सामग्री शामिल हो सकती है।
• प्रदर्शन की निगरानी करें: अपनी वेबसाइट के प्रदर्शन पर लेज़ी लोडिंग के प्रभाव को ट्रैक करने के लिए प्रदर्शन निगरानी टूल का उपयोग करें। इससे आपको किसी भी समस्या की पहचान करने और अपने कार्यान्वयन को अनुकूलित करने में मदद मिलेगी। Google के पेजस्पीड इनसाइट्स और वेबपेजटेस्ट साइट के प्रदर्शन को मापने के लिए बेहतरीन मुफ्त टूल हैं।

अंतर्राष्ट्रीयकरण संबंधी विचार

वैश्विक दर्शकों के लिए लेज़ी लोडिंग लागू करते समय, इन अंतर्राष्ट्रीयकरण कारकों पर विचार करें:

• विभिन्न नेटवर्क गति: विभिन्न क्षेत्रों के उपयोगकर्ताओं की नेटवर्क गति काफी भिन्न हो सकती है। धीमी कनेक्शन के लिए अपनी लेज़ी लोडिंग रणनीति को अनुकूलित करें।
• डेटा लागत: कुछ क्षेत्रों में, डेटा लागत अधिक होती है। लेज़ी लोडिंग डेटा की खपत को कम करने और सीमित डेटा योजनाओं वाले उपयोगकर्ताओं के लिए उपयोगकर्ता अनुभव को बेहतर बनाने में मदद कर सकती है।
• डिवाइस क्षमताएं: विभिन्न क्षेत्रों के उपयोगकर्ता विभिन्न क्षमताओं वाले विभिन्न उपकरणों का उपयोग कर सकते हैं। यह सुनिश्चित करने के लिए कि यह सही ढंग से काम करता है, अपने लेज़ी लोडिंग कार्यान्वयन का विभिन्न उपकरणों पर परीक्षण करें।
• कंटेंट डिलीवरी नेटवर्क (CDNs): दुनिया भर में स्थित सर्वरों से अपनी वेबसाइट की संपत्ति वितरित करने के लिए CDN का उपयोग करें। यह विभिन्न क्षेत्रों के उपयोगकर्ताओं के लिए प्रदर्शन में सुधार कर सकता है। उदाहरण के लिए, यूरोपीय स्थलों की छवियाँ यूरोपीय संघ के उपयोगकर्ताओं के लिए यूरोप में एक CDN समापन बिंदु से परोसी जानी चाहिए, जब भी संभव हो।
• छवि प्रारूप: WebP जैसे आधुनिक छवि प्रारूपों का उपयोग करने पर विचार करें, जो JPEG और PNG जैसे पारंपरिक प्रारूपों की तुलना में बेहतर संपीड़न और गुणवत्ता प्रदान करते हैं। हालाँकि, ब्राउज़र संगतता से अवगत रहें; WebP का समर्थन नहीं करने वाले पुराने ब्राउज़रों के लिए उपयुक्त फॉलबैक का उपयोग करें।
• पहुंच (Accessibility): सुनिश्चित करें कि आपका लेज़ी लोडिंग कार्यान्वयन विकलांग उपयोगकर्ताओं के लिए सुलभ है। छवियों के लिए उपयुक्त ऑल्ट टेक्स्ट प्रदान करें और सुनिश्चित करें कि लोडिंग स्थिति सहायक तकनीकों को सूचित की जाती है।

निष्कर्ष

लेज़ी लोडिंग वेबसाइट के प्रदर्शन को अनुकूलित करने और उपयोगकर्ता अनुभव को बेहतर बनाने के लिए एक शक्तिशाली तकनीक है। ऑफ-स्क्रीन संसाधनों की लोडिंग को स्थगित करके, आप प्रारंभिक पेज लोड समय को कम कर सकते हैं, बैंडविड्थ की खपत को कम कर सकते हैं, और सर्वर लोड को कम कर सकते हैं। चाहे आप एक छोटी व्यक्तिगत वेबसाइट बना रहे हों या एक बड़ा उद्यम एप्लिकेशन, लेज़ी लोडिंग आपकी प्रदर्शन अनुकूलन रणनीति का एक प्रमुख हिस्सा होना चाहिए। इस लेख में उल्लिखित सर्वोत्तम प्रथाओं का पालन करके और अंतर्राष्ट्रीयकरण कारकों पर विचार करके, आप यह सुनिश्चित कर सकते हैं कि आपका लेज़ी लोडिंग कार्यान्वयन प्रभावी है और वैश्विक दर्शकों के लिए एक सकारात्मक उपयोगकर्ता अनुभव प्रदान करता है।

लेज़ी लोडिंग को अपनाएं और सभी के लिए एक तेज़, अधिक कुशल और उपयोगकर्ता-अनुकूल वेब अनुभव को अनलॉक करें।